<template>
    <div>
        <mj-title type="h2" title="Slider 滑块"></mj-title>
        <div class="page-desc">滑动输入器，用于在数值区间/自定义区间内进行选择，支持连续或离散值。</div>

        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <p>基础用法：{{value1}}</p>
                <div><mj-slider v-model="value1"></mj-slider></div>
                
                <p>隐藏提示：{{value2}}</p>
                <div><mj-slider v-model="value2" :showTooltip="false"></mj-slider></div>
                
                <p>格式化提示：{{value3}}</p>
                <div><mj-slider v-model="value3" :formatTooltip="formatTooltip"></mj-slider></div>
                
                <p>禁用状态：{{value4}}</p>
                <div><mj-slider v-model="value4" :disabled="true"></mj-slider></div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;p>基础用法：{{value1}}&lt;/p>
    &lt;div>&lt;mj-slider v-model="value1">&lt;/mj-slider>&lt;/div>
    
    &lt;p>隐藏提示：{{value2}}&lt;/p>
    &lt;div>&lt;mj-slider v-model="value2" :showTooltip="false">&lt;/mj-slider>&lt;/div>
    
    &lt;p>格式化提示：{{value3}}&lt;/p>
    &lt;div>&lt;mj-slider v-model="value3" :formatTooltip="formatTooltip">&lt;/mj-slider>&lt;/div>
    
    &lt;p>禁用状态：{{value4}}&lt;/p>
    &lt;div>&lt;mj-slider v-model="value4" :disabled="true">&lt;/mj-slider>&lt;/div>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
           value1:0,
           value2:50,
           value3:25,
           value4:25,
        }
    },
    methods:{
        formatTooltip(value){
            return value+'%'
        }
    }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="指定滑动步长"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <p>指定滑动步长：{{value5}}</p>
                <div><mj-slider v-model="value5" :step="5"></mj-slider></div>
                <p>显示间断点：{{value6}}</p>
                <div><mj-slider v-model="value6" :step="10" :showStops="true"></mj-slider></div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;p>指定滑动步长：{{value5}}&lt;/p>
    &lt;div>&lt;mj-slider v-model="value5" :step="10">&lt;/mj-slider>&lt;/div>
    &lt;p>显示间断点：{{value6}}&lt;/p>
    &lt;div>&lt;mj-slider v-model="value6" :step="10" :showStops="true">&lt;/mj-slider>&lt;/div>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
           value5:30,
           value6:30,
        }
    },
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="设置最小值和最大值"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <p>指定最大值和最小值：{{value7}}</p>
                <div><mj-slider v-model="value7" :min="10" :max="80"></mj-slider></div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;p>指定最大值和最小值：{{value7}}&lt;/p>
    &lt;div>&lt;mj-slider v-model="value7" :min="10" :max="80">&lt;/mj-slider>&lt;/div>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
           value7:30,
        }
    },
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="设定选择范围"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <p>选择范围{{value8}}</p>
                <div><mj-slider v-model="value8"></mj-slider></div>
                <p>选择范围，并指定最大最小值{{value9}}</p>
                <div><mj-slider v-model="value9" :min="10" :max="80"></mj-slider></div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;p>选择范围{value8}&lt;/p>
    &lt;div>&lt;mj-slider v-model="value8">&lt;/mj-slider>&lt;/div>
    &lt;p>选择范围，并指定最大最小值{value9}&lt;/p>
    &lt;div>&lt;mj-slider v-model="value9" :min="10" :max="80">&lt;/mj-slider>&lt;/div>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
           value8:[30,60],
           value9:[30,50],
        }
    },
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="展示标记"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <p>展示标记{{value10}}</p>
                <div><mj-slider v-model="value10" :marks="marks"></mj-slider></div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;p>展示标记{value10}&lt;/p>
    &lt;div>&lt;mj-slider v-model="value10" :marks="marks">&lt;/mj-slider>&lt;/div>
&lt;/template>
&lt;script>
export default {
    data() {
        return {
           value10:50,
           marks: {
              0: 'start',
              25: '25%',
              50: 'center',
              75: '75%',
              100: '<i style="color:red">end</i>'
            },
        }
    },
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Slider 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>value</td>
                    <td>当前值，默认为0。Array时为范围选择</td>
                    <td>Number,Array</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>min</td>
                    <td>最小值</td>
                    <td>Number</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>max</td>
                    <td>最大值</td>
                    <td>Number</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>step</td>
                    <td>步长</td>
                    <td>Number</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>showStops</td>
                    <td>是否显示间断点</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>showTooltip</td>
                    <td>是否显示 tooltip</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>formatTooltip</td>
                    <td>格式化 tooltip message，仅当showTooltip为true时</td>
                    <td>Function</td>
                    <td></td>
                </tr>
                <tr>
                    <td>marks</td>
                    <td>Function</td>
                    <td>标记，key 的类型必须为number，表示当前位置</td>
                    <td></td>
                </tr>
                <tr>
                    <td>trigger</td>
                    <td>触发改变事件，默认为鼠标弹起时触发，其他值时为鼠标移动时触发</td>
                    <td>String</td>
                    <td></td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Slider 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>change</td>
                    <td>值改变时触发</td>
                    <td>value</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
 export default {
   data(){
     return {
       value1:0,
       value2:50,
       value3:25,
       value4:25,
       value5:30,
       value6:30,
       value7:30,
       value8:[30,60],
       value9:[30,50],
       value10:50,
       marks: {
          0: 'start',
          25: '25%',
          50: 'center',
          75: '75%',
          100: '<i style="color:red">end</i>'
        },
     }
   },
   methods:{
        formatTooltip(value){
            return value+'%'
        }
   }
 }
</script>